<template>
  <FrontSideTreeTable
    treeDataUrl="/sys/units/getList"
    tableDataUrl="/sys/user/getList"
    addUrl="/sys/user/add"
    editUrl="/sys/user/edit"
    deleteUrl="/sys/user/delete"
    treeTitle="单位"
    :tableTitle="selectedNode.name+'用户列表'"
    :tableProps="tableProps"
    :columns="columns"
    searchHint="根据 账号\姓名\部门\角色 查找"
    :searchProps="searchProps"
    :form="form"
    :loadingForm="loadingForm"
    :rules="rules"
    @onTableCreated="onTableCreated"
    @onNodeClick="onNodeClick"
    @beforeAdd="beforeAdd"
    @beforeEdit="beforeEdit">
    <!--筛选列，使用filterChange监听事件代替filterMethod方法-->
    <template slot="afterColumns">
      <el-table-column
        align="center"
        prop="roleName"
        column-key="roleId"
        label="角色"
        :filters="roleFilters"
        filter-placement="bottom">
      </el-table-column>
    </template>
    <!--表单-->
    <template slot="form">
      <el-form-item label="账号" prop="account">
        <el-input v-model="form.account" placeholder="输入账号"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" :type="passwordInput.type" placeholder="输入密码">
          <template slot="append">
            <a @click.prevent="togglePassword"><i class="fa" :class="{'fa-eye':!passwordInput.isVisible, 'fa-eye-slash':passwordInput.isVisible}"></i></a>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" placeholder="输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="tel">
        <el-input v-model="form.tel" placeholder="输入联系电话"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email" placeholder="输入邮箱"></el-input>
      </el-form-item>
      <el-form-item label="部门" prop="unitsId">
        <el-select v-model="form.unitsId" style="width:100%" placeholder="请选择单位，输入文字可搜索" filterable>
          <el-option v-for="units of unitsList" :key="units.id" :label="units.name" :value="units.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="角色" prop="roleId">
        <el-select v-model="form.roleId" style="width:100%" placeholder="请选择角色，输入文字可搜索" filterable>
          <el-option v-for="role of roleList" :key="role.id" :label="role.name" :value="role.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="form.notes"></el-input>
      </el-form-item>
    </template>
  </FrontSideTreeTable>
</template>

<script>
  import FrontSideTreeTable from "../../template/FrontSideTreeTable.vue"
  import {clearFields} from "../../../assets/js/utils/ObjectUtils"
  import {doGet,doPost,doDelete} from "../../../assets/js/utils/RequestUtils"
  import {telValidator} from "../../../assets/js/utils/ValidateUtils"

  let oldAccount = "";

  const unitsDataUrl = "/sys/units/getList",
    roleDataUrl="/sys/role/getList";

  export default {
    name:"UserManagement",
    data() {
      //账号校验
      let accountValidator = (rule, value, callback)=>{
        if(value === oldAccount) {
          callback();
        }else {
          if(this.dataList.some(item=>item.account === value)) {
            callback(new Error("账号重复"));
          }else {
            callback();
          }
        }
      };

      return {
        dataList:[],
        unitsList:[],
        roleList:[],
        tableProps:{
          parentId: "unitsId"
        },
        columns:[
          {prop:"account", label:"账号"},
          {prop:"name", label:"姓名"},
          {prop:"unitsName", label:"部门"}
        ],
        searchProps:["account", "name", "unitsName", "roleName"],
        form:{account:"", password:"", name:"", tel:"", email:"", unitsId:"", roleId:"", notes:""},
        loadingForm: false,
        selectedNode: {name:""},
        rules: {
          account:[
            {required:true, message:"请输入账号", trigger:"blur"},
            {validator:accountValidator, trigger:"blur"}
          ],
          password:[
            {required:true, message:"请输入密码", trigger:"blur"}
          ],
          name:[
            {required:true, message:"请输入姓名", trigger:"blur"}
          ],
          tel: [
            {validator:telValidator, trigger:"blur"}
          ],
          email:[
            {type:"email", message:"请输入正确的邮箱格式", trigger:"blur"}
          ],
          unitsId:[
            {required:true, message:"请选择所属单位", trigger:"blur"}
          ],
          roleId:[
            {required:true, message:"请选择用户角色", trigger:"blur"}
          ],
        },
        //密码输入框是否可见
        passwordInput: {
          type: "password",
          isVisible:false
        }
      }
    },
    computed: {
      roleFilters() {
        return this.roleList.map(item=>{
          return {
            text:item.name,
            value:item.id
          }
        })
      }
    },
    methods: {
      onTableCreated(dataList) {
        this.dataList = dataList;
      },
      onNodeClick(data) {
        this.selectedNode = data;
      },
      togglePassword() {
        this.passwordInput.isVisible = !this.passwordInput.isVisible;
        this.passwordInput.type = this.passwordInput.isVisible?"text":"password";
      },
      beforeAdd() {
        oldAccount = "";
        clearFields(this.form);
        this.form = {account:"", password:"", name:"", tel:"", email:"", unitsId:this.selectedNode.id, roleId:"", notes:""};
      },
      beforeEdit(data) {
        oldAccount = data.account;
        this.form = {...data};
      },
      fetchFormData() {
        this.loadingForm = true;
        doGet(unitsDataUrl)
          .then(response=>{
            this.unitsList = response;
            this.fetchRoleData();
          })
          .catch(error => this.$message({message:"获取单位数据失败:"+error.statusText, type:"error"}));
      },
      fetchRoleData() {
        doGet(roleDataUrl)
          .then(response=>{
            this.roleList = response;
            this.loadingForm = false;
          })
          .catch(error => this.$message({message:"获取单位数据失败:"+error.statusText, type:"error"}))
      }
    },
    activated() {
      this.fetchFormData();
    },
    components:{FrontSideTreeTable}
  }
</script>



// WEBPACK FOOTER //
// UserManagement.vue?8fdeec84